<template>
  <el-form :model="form" ref="form" label-width="120px" :rules="rules">
    <el-form-item label="计划名称:" prop="planName">
      <el-input v-model="form.planName" placeholder="请输入计划名称" />
    </el-form-item>
    <el-form-item label="计划类型:" prop="planType">
      <el-select clearable placeholder="请选择" v-model="form.planType" style="width: 100%">
        <el-option :value="1" label="区域"></el-option>
        <el-option :value="2" label="部门"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="资产类别:" prop="categoryList">
      <el-cascader
        @change="cascaderChange"
        v-model="form.categoryList"
        style="width: 100%"
        :options="options"
        :props="props"
        collapse-tags
        clearable
      ></el-cascader>
    </el-form-item>
    <el-form-item label="指定审核人:" prop="reviewUserId">
      <user-select
        ref="userSelect"
        :selectValue="form.reviewUserId"
        v-model="form.reviewUserId"
        @select="userSelectChange"
      />
    </el-form-item>
    <el-form-item label="计划开始日期:" prop="beginDate">
      <el-date-picker
        value-format="yyyy-MM-dd"
        v-model="form.beginDate"
        type="date"
        placeholder="选择开始日期"
      />
    </el-form-item>
    <el-form-item label="计划结束日期:" prop="endDate">
      <el-date-picker
        value-format="yyyy-MM-dd"
        v-model="form.endDate"
        type="date"
        placeholder="选择结束日期"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import UserSelect from '../components/UserSelect'
import { categoryTree } from '@/api/assetsNew'

export default {
  components: {
    UserSelect
  },
  mounted() {
    categoryTree().then(res => {
      console.log('categoryTree', res)
      const arr = res.data
      this.options = this.handleData(res.data)
    })
  },
  data() {
    return {
      props: { multiple: true, expandTrigger: 'hover' },
      options: [],
      form: {
        planName: null,
        planType: null,
        beginDate: null,
        endDate: null,
        reviewUserId: null,
        planState: 0
      },
      selectData: [],
      rules: {
        planName: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
        planType: [{ required: true, message: '请输入计划类别', trigger: 'blur' }],
        // categoryList: [{ required: true, message: '请选择资产类别', trigger: 'blur' }],
        reviewUserId: [{ required: true, message: '请选择审核人', trigger: 'blur' }],
        beginDate: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
        endDate: [{ required: true, message: '请选择结束时间', trigger: 'blur' }]
      },
      saveCategoryArr: [] // 暂存资产类别数组
    }
  },
  computed: {
    getEndDate() {
      return this.form.endDate
    },
    getStartDate() {
      return this.form.beginDate
    }
  },
  watch: {
    getEndDate: {
      handler(n, o) {
        if (n !== o && n) {
          const beginDate = new Date(this.form.beginDate).getTime()
          const endDate = new Date(this.form.endDate).getTime()
          if (endDate - beginDate < 0) {
            this.$message.error('结束时间不能小于开始时间')
            this.$set(this.form, 'endDate', null)
          }
        }
      },
      deep: true
    },
    getStartDate: {
      handler(n, o) {
        if (n !== o && n) {
          if (this.form.endDate) {
            const beginDate = new Date(this.form.beginDate).getTime()
            const endDate = new Date(this.form.endDate).getTime()
            if (beginDate - endDate > 0) {
              this.$message.error('开始时间不能大于结束时间')
              this.$set(this.form, 'beginDate', null)
            }
          }
        }
      },
      deep: true
    }
  },
  methods: {
    // 点上一步回显资产类别数据
    showCategory() {
      this.$set(this.form, 'categoryList', this.saveCategoryArr)
    },
    cascaderChange(arr) {
      console.log('cascaderChange', arr)
    },
    handleData(arr) {
      arr.map(v => {
        v.value = v.key
        v.label = v.title
        if (v.children.length > 0) {
          this.handleData(v.children)
        } else {
          delete v.children
        }
      })
      return arr
    },
    postData() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.categoryList && this.form.categoryList.length > 0) {
            let arr = []
            this.saveCategoryArr = [...this.form.categoryList]
            this.form.categoryList.map(v => {
              arr.push(v[v.length - 1])
            })
            this.$set(this.form, 'categoryList', arr.join(','))
          }
          this.$emit('postData', true, this.form, 1)
        } else {
          this.$emit('notSubmit', 1)
        }
      })
    },
    handleSelect(key, value) {
      this.$set(this.form, key, value.key)
    },
    userSelectChange(value) {
      this.form.reviewUserId = value.id
    }
  }
}
</script>
